<template>
    <div>
        <div class="block">
            <div v-if="!tableData.length" style="text-align: center;margin: 1rem 0;">暂无信息</div>
            <template v-if="tableData.length">
                <div class="item" v-for="(v,index) in tableData" @click="goDetail(v)">
                    <div style="font-weight: 900;color: #555;">{{v.title}}</div>
                    <div style="font-size: .8rem;"><span class="tit">时间</span>：{{v.create_time}}</div>
                    <div>
                        <template v-for="v1 in v.img_url">
                            <img :src="v1" style="width: 80px;height: 80px;margin: .5rem .1rem;" @click.stop="viewImg(v1)">
                        </template>
                    </div>
                    <div><p class="text" style="font-size: .9rem;color: #555;">{{v.content}}</p></div>
                    <!--<span class="el-icon-lx-delete" @click.stop="delComment(v)"></span>-->
                    <div class="ask">
                        <span class="icon"><span class="el-icon-view"></span><span>{{v.views_num}}</span></span>
                        <span class="icon" @click.stop="goDetail(v)"><span class="el-icon-chat-dot-square"></span><span>{{v.comment_num}}</span></span>
                        <span class="icon" @click.stop="ding(v)"><span class="fa fa-thumbs-o-up"></span><span>{{v.thumbs_num}}</span></span>
                        <span class="icon" @click.stop="cai(v)"><span class="fa fa-thumbs-o-down"></span><span>{{v.tread_num||0}}</span></span>
                    </div>
                </div>
            </template>
        </div>
        <div style="height: 40px;"></div>
        <!--添加-->
        <div @click="addTalk"
             style="position: absolute;bottom: 0;text-align: center;background-color: #20a0ff;color: #fff;width: 100%;line-height: 40px;">
            + 我有话说
        </div>
        <div id="viewImg"></div>
    </div>
</template>

<script>
    import pub from '../../utils/pub'
    export default {
        name: "talk",
        data(){
            return{
                tableData: [],
                pageSize: 0,
                totalRow: 0,
                currentPage: 0,

                loginInfo: {},
            }
        },
        methods: {
            loadopen() {
                this.loading = this.$loading({lock: true,text: 'Loading',spinner: 'el-icon-loading',background: 'rgba(0, 0, 0, 0.2)'});setTimeout(() => {this.loading.close();}, 5000);
            },
            loadclose() {this.loading.close();},
            // 分页导航
            handleCurrentChange(val) {
            },
            // 获取登录用户信息
            getLoginInfo() {
                this.loadopen();
                this.config.mpost('/api/housinggestate/findMyHousinggestate', {}).then(res=>{
                    this.loadclose();
                    if(res.data.code==='0'){
                        if(res.data.userAddressList.length<=1){
                            this.loginInfo = res.data.userAddressList[0];
                        }else{
                            res.data.userAddressList.forEach(it=>{
                                if(it.is_default==='1'){
                                    this.loginInfo = it;
                                }
                            })
                        }
                        this.getData('1')
                    }else {
                        this.$message.error(this.config.mobileError(res.data));
                    }
                })
            },
            // 获取列表数据
            getData(pageNumber) {
                this.loadopen();
                this.config.mpost('/api/dynamic/dynamic/findPage', {
                    pageNum: pageNumber?pageNumber:1,
                    housinggestateId: this.loginInfo.housinggestate_id,
                }).then(res=>{
                    this.loadclose();
                    if(res.data.code==='0'){
                        this.tableData = res.data.page.list;
                        this.pageSize = res.data.page.pageSize;
                        this.totalRow = res.data.page.totalRow;
                        this.currentPage = res.data.page.pageNumber;
                        this.tableData.forEach(it=>{
                            it.img_url = it.img_url?it.img_url.split(','):[]
                        })
                    }else {
                        this.$message.error(this.config.mobileError(res.data));
                    }
                })
            },
            goDetail(v){
                this.$router.push({path: '/mobile/talk-detail', query: {id: v.id, housinggestateId: this.loginInfo.housinggestate_id}})
            },
            search() {
            },
            addTalk(){
                this.$router.push({path: '/mobile/talk-add', query: {housinggestateId: this.loginInfo.housinggestate_id}})
            },
            // 顶
            ding(v){
                this.loadopen();
                this.config.mpost('/api/dynamic/dynamicthumbs/addOrDeleteDynamicThumbs', {id: v.id}).then(res=>{
                    this.loadclose();
                    if(res.data.code==='0'){
                        this.$message.success(res.data.message);
                        this.getData()
                    }else {
                        this.$message.error(this.config.mobileError(res.data));
                    }
                })
            },
            // 踩
            cai(v){
                this.loadopen();
                this.config.mpost('/api/dynamic/dynamictread/addOrDeleteDynamicTread', {id: v.id}).then(res=>{
                    this.loadclose();
                    if(res.data.code==='0'){
                        this.$message.success(res.data.message);
                        this.getData()
                    }else {
                        this.$message.error(this.config.mobileError(res.data));
                    }
                })
            },
            // 删除评论
            delComment(v){
                this.loadopen();
                this.config.mpost('/api/dynamic/dynamic/deleteDynamic', {id: v.id}).then(res=>{
                    this.loadclose();
                    if(res.data.code==='0'){
                        this.getData()
                    }else {
                        this.$message.error(this.config.mobileError(res.data));
                    }
                })
            },
            // 预览图片
            viewImg(url){
                pub.viewBigImg(url)
            },
            // 分页导航
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.getData(val);
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
        },
        mounted(){
            this.getLoginInfo()
        }
    }
</script>

<style scoped lang="less">
    .block{
        .item{
            color: #333;
            padding: .5rem .5rem;
            margin: .8rem;
            /*box-shadow: 0 0 10px 0 #ccc;*/
            border-bottom: 1px solid #eee;
            border-radius: 6px;
            position: relative;
            .tit{
                color: #666;
            }
            .el-icon-lx-delete{
                position: absolute;top: 10px;right: 10px;color: #8c939d;
            }
        }
    }

    .text{
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }
    .ask{
        color: #888;
        .icon{
            display: inline-block;
            margin: 1rem 1rem 0 0;
        }
    }
</style>
